<template>
  <div class="product-list-container">
    <!-- 分类导航区域 -->
    <div class="categories-nav">
      <div class="category-item" 
        :class="{ active: !categoryId }"
        @click="clearCategory">
        全部商品
      </div>
      <div class="category-item" 
        v-for="cat in categories" 
        :key="cat.id"
        :class="{ active: categoryId == cat.id }"
        @click="selectCategory(cat.id, cat.name)">
        {{ cat.name }}
      </div>
    </div>

    <!-- 过滤和排序区域 -->
    <div class="filter-container">
      <div class="category-filter">
        <el-select v-model="categoryId" placeholder="商品分类" clearable @change="handleCategoryChange">
          <el-option label="全部分类" value=""></el-option>
          <el-option 
            v-for="category in categories" 
            :key="category.id" 
            :label="category.name" 
            :value="category.id"
          ></el-option>
        </el-select>
        
        <div v-if="selectedCategory" class="filter-tag">
          当前分类: <el-tag closable @close="clearCategory">{{ selectedCategory }}</el-tag>
        </div>
      </div>
      
      <div class="price-filter">
        <el-input placeholder="最低价" v-model="minPrice" class="price-input">
          <template #prefix>¥</template>
        </el-input>
        <span class="price-separator">-</span>
        <el-input placeholder="最高价" v-model="maxPrice" class="price-input">
          <template #prefix>¥</template>
        </el-input>
        <el-button type="primary" size="small" @click="applyPriceFilter">确定</el-button>
      </div>
      
      <div class="sort-options">
        <el-radio-group v-model="sortOption" size="small" @change="handleSortChange">
          <el-radio-button label="default">默认</el-radio-button>
          <el-radio-button label="sales">销量</el-radio-button>
          <el-radio-button label="price-asc">价格 ↑</el-radio-button>
          <el-radio-button label="price-desc">价格 ↓</el-radio-button>
          <el-radio-button label="new">新品</el-radio-button>
        </el-radio-group>
      </div>
    </div>

    <!-- 商品列表展示 -->
    <div class="products-grid" v-loading="loading">
      <div v-if="products.length === 0 && !loading" class="empty-container">
        <div class="empty-state-custom">
          <div class="empty-state-image">
            <img :src="getEmptyStateImage" alt="暂无商品">
            <div class="empty-state-decoration circle-1"></div>
            <div class="empty-state-decoration circle-2"></div>
            <div class="empty-state-decoration star-1"></div>
            <div class="empty-state-decoration star-2"></div>
          </div>
          <h3 class="empty-state-title">{{ emptyDescription }}</h3>
          <p class="empty-state-hint">
            {{ getEmptyStateHint() }}
          </p>
          
          <transition name="fade">
            <div class="empty-state-actions" v-if="hasFilters">
              <el-button type="primary" @click="clearAllFilters">
                <i class="el-icon-delete"></i> 清除所有筛选条件
              </el-button>
              <el-button @click="router.push('/user/products')" 
                v-if="route.path !== '/user/products'">
                <i class="el-icon-back"></i> 返回全部商品
              </el-button>
            </div>
          </transition>
          
          <!-- 分类推荐 -->
          <transition name="fade-delayed">
            <div class="category-suggestions" v-if="selectedCategory && suggestedCategories.length > 0">
              <p class="suggestion-title">您可能感兴趣的其他分类：</p>
              <div class="suggestion-categories">
                <div 
                  v-for="cat in suggestedCategories" 
                  :key="cat.id" 
                  class="suggestion-category-item"
                  @click="selectCategory(cat.id, cat.name)">
                  {{ cat.name }}
                </div>
              </div>
            </div>
          </transition>
        </div>
      </div>
      
      <div v-else class="product-card" v-for="product in products" :key="product.id" @click="viewProductDetail(product.id)">
        <div class="product-image">
          <img :src="product.coverImage || 'https://via.placeholder.com/300'" :alt="product.name">
          <div class="product-badges">
            <div class="badge new" v-if="product.isNew">新品</div>
            <div class="badge hot" v-if="product.isHot">热销</div>
            <div class="badge recommend" v-if="product.isRecommended">推荐</div>
          </div>
        </div>
        <div class="product-info">
          <h3 class="product-name">{{ product.name }}</h3>
          <div class="product-price">
            <span class="current-price">¥{{ product.price }}</span>
            <span class="original-price" v-if="product.originalPrice && product.originalPrice > product.price">
              ¥{{ product.originalPrice }}
            </span>
          </div>
          <div class="product-meta">
            <span class="sales">销量: {{ product.sales || 0 }}</span>
            <span class="brand" v-if="product.brand">{{ product.brand }}</span>
          </div>
          <div class="product-actions">
            <el-button type="primary" size="small" @click.stop="addToCart(product)">
              <i class="el-icon-shopping-cart-2"></i> 加入购物车
            </el-button>
            <el-button type="default" size="small" @click.stop="addToFavorite(product)">
              <i class="el-icon-star-off"></i>
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页器 -->
    <div class="pagination-container" v-if="totalProducts > 0">
      <el-pagination
        background
        layout="prev, pager, next, jumper"
        :total="totalProducts"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import productApi from '../../api/product';
import categoryApi, { ICategoryDto } from '../../api/category';

// 路由对象
const route = useRoute();
const router = useRouter();

// 商品数据
const loading = ref(false);
const products = ref([]);
const totalProducts = ref(0);
const currentPage = ref(1);
const pageSize = ref(12);

// 分类数据
const categories = ref<ICategoryDto[]>([]);
const categoryId = ref('');
const selectedCategory = ref('');

// 价格筛选
const minPrice = ref('');
const maxPrice = ref('');

// 排序选项
const sortOption = ref('default');
const sortMapping = {
  'default': { sort: 'id', direction: 'desc' },
  'sales': { sort: 'sales', direction: 'desc' },
  'price-asc': { sort: 'price', direction: 'asc' },
  'price-desc': { sort: 'price', direction: 'desc' },
  'new': { sort: 'createdAt', direction: 'desc' }
};

// 空状态提示信息
const emptyDescription = computed(() => {
  if (selectedCategory.value) {
    return `该分类下暂无商品： ${selectedCategory.value}`;
  } else if (route.query.keyword) {
    return `未找到匹配"${route.query.keyword}"的商品`;
  } else if (minPrice.value || maxPrice.value) {
    return '未找到符合价格范围的商品';
  } else {
    return '暂无商品';
  }
});

// 获取空状态的图片URL
const getEmptyStateImage = computed(() => {
  if (selectedCategory.value) {
    return 'https://cdni.iconscout.com/illustration/premium/thumb/empty-product-category-7236765-5875080.png';
  } else if (route.query.keyword) {
    return 'https://cdni.iconscout.com/illustration/premium/thumb/search-result-not-found-6356698-5243309.png';
  } else if (minPrice.value || maxPrice.value) {
    return 'https://cdni.iconscout.com/illustration/premium/thumb/price-filter-6289746-5175041.png';
  } else {
    return 'https://cdni.iconscout.com/illustration/premium/thumb/empty-cart-7236766-5875081.png';
  }
});

// 获取空状态的补充提示文字
const getEmptyStateHint = () => {
  if (selectedCategory.value) {
    return '我们正努力补充此分类的商品，敬请期待...';
  } else if (route.query.keyword) {
    return '您可以尝试其他关键词，或浏览我们的分类目录';
  } else if (minPrice.value || maxPrice.value) {
    return '尝试调整价格区间，或移除价格筛选查看更多商品';
  } else {
    return '我们正在努力上架新商品，很快就会与您见面！';
  }
};

// 获取商品分类
const fetchCategories = async () => {
  try {
    console.log('正在获取所有分类...');
    const result = await categoryApi.getAllCategories();
    categories.value = result.data || [];
    console.log('已获取分类列表:', categories.value);
    
    // 如果存在categoryId，则设置selectedCategory
    if (categoryId.value) {
      const selectedCat = categories.value.find(cat => cat.id === Number(categoryId.value));
      selectedCategory.value = selectedCat ? selectedCat.name : '';
      console.log('当前选中分类:', selectedCategory.value || '无');
    }
  } catch (error) {
    console.error('获取分类出错:', error);
    // 使用备用的分类数据
    categories.value = [
      { id: 1, name: '护肤' },
      { id: 2, name: '彩妆' },
      { id: 3, name: '香水' },
      { id: 4, name: '美容工具' },
      { id: 5, name: '洗护' }
    ];
    
    console.log('使用默认分类数据:', categories.value);
    
    if (categoryId.value) {
      const selectedCat = categories.value.find(cat => cat.id === Number(categoryId.value));
      selectedCategory.value = selectedCat ? selectedCat.name : '';
    }
  }
};

// 获取商品列表
const fetchProducts = async () => {
  loading.value = true;
  products.value = []; // 重置商品列表，避免显示旧数据
  
  try {
    let result;
    // 从路由参数中获取ES搜索标识
    const useES = route.query.useES === 'true';
    const keyword = route.query.keyword as string;
    
    // 优先使用ES搜索
    if (useES && keyword) {
      console.log('使用ES搜索API，关键词:', keyword);
      result = await productApi.searchByES(
        keyword, 
        currentPage.value - 1, 
        pageSize.value
      );
    } 
    // 如果有分类ID，使用专门的分类API
    else if (categoryId.value) {
      console.log('使用getProductsByCategory API获取分类商品');
      result = await productApi.getProductsByCategory(
        Number(categoryId.value), 
        currentPage.value, 
        pageSize.value
      );
      // 获取选中分类的名称
      const selectedCat = categories.value.find(cat => cat.id === Number(categoryId.value));
      selectedCategory.value = selectedCat ? selectedCat.name : '';
      console.log('选中分类名称:', selectedCategory.value || '未找到');
    } else {
      // 构建查询参数
      const params = {
        page: currentPage.value - 1, // 后端页码从0开始
        size: pageSize.value,
        sort: sortMapping[sortOption.value]?.sort || 'id',
        direction: sortMapping[sortOption.value]?.direction || 'desc'
      };
      
      // 添加价格筛选
      if (minPrice.value) {
        // @ts-ignore
        params.minPrice = minPrice.value;
      }
      
      if (maxPrice.value) {
        // @ts-ignore
        params.maxPrice = maxPrice.value;
      }
      
      // 添加搜索关键词
      if (route.query.keyword) {
        // @ts-ignore
        params.keyword = route.query.keyword;
      }
      
      console.log('使用通用查询API，参数:', params);
      // 获取商品数据
      result = await productApi.getProductsPage(params);
    }
    
    if (result && result.data) {
      // 处理不同API返回的数据格式
      if (result.data.content) {
        // Page格式
        products.value = result.data.content || [];
        totalProducts.value = result.data.totalElements || 0;
      } else if (Array.isArray(result.data)) {
        // 数组格式
        products.value = result.data;
        totalProducts.value = result.data.length;
      } else {
        products.value = [];
        totalProducts.value = 0;
      }
      console.log(`获取到${products.value.length}个商品`);
    } else {
      console.warn('获取商品列表结果为空');
      products.value = [];
      totalProducts.value = 0;
    }
    
  } catch (error) {
    console.error('获取商品列表失败:', error);
    ElMessage.error('获取商品列表失败');
    products.value = [];
    totalProducts.value = 0;
  } finally {
    loading.value = false;
  }
};

// 处理价格筛选
const applyPriceFilter = () => {
  if ((minPrice.value && isNaN(Number(minPrice.value))) || 
      (maxPrice.value && isNaN(Number(maxPrice.value)))) {
    ElMessage.warning('请输入有效的价格范围');
    return;
  }
  
  if (Number(minPrice.value) > Number(maxPrice.value) && minPrice.value && maxPrice.value) {
    ElMessage.warning('最低价不能高于最高价');
    return;
  }
  
  currentPage.value = 1; // 重置到第一页
  fetchProducts();
};

// 处理排序变化
const handleSortChange = () => {
  currentPage.value = 1; // 重置到第一页
  fetchProducts();
};

// 处理页码变化
const handlePageChange = (page) => {
  currentPage.value = page;
  fetchProducts();
  // 滚动到顶部
  window.scrollTo({ top: 0, behavior: 'smooth' });
};

// 查看商品详情
const viewProductDetail = (productId) => {
  router.push(`/user/product/${productId}`);
};

// 添加到购物车
const addToCart = (product) => {
  // 这里应该调用添加到购物车的API
  console.log('添加到购物车:', product);
  ElMessage.success(`已将 ${product.name} 添加到购物车`);
};

// 添加到收藏
const addToFavorite = (product) => {
  // 这里应该调用添加到收藏的API
  console.log('添加到收藏:', product);
  ElMessage.success(`已将 ${product.name} 添加到收藏`);
};

// 处理分类变化
const handleCategoryChange = () => {
  if (categoryId.value) {
    router.push({
      path: '/user/products',
      query: { ...route.query, category: categoryId.value }
    });
  } else {
    const query = { ...route.query };
    delete query.category;
    router.push({
      path: '/user/products',
      query
    });
  }
};

// 清除分类筛选
const clearCategory = () => {
  categoryId.value = '';
  selectedCategory.value = '';
  const query = { ...route.query };
  delete query.category;
  router.push({
    path: '/user/products',
    query
  });
};

// 选择分类
const selectCategory = (id, name) => {
  categoryId.value = id.toString();
  selectedCategory.value = name;
  router.push({
    path: '/user/products',
    query: { ...route.query, category: id.toString() }
  });
};

// 清除所有筛选条件
const clearAllFilters = () => {
  categoryId.value = '';
  selectedCategory.value = '';
  minPrice.value = '';
  maxPrice.value = '';
  sortOption.value = 'default';
  
  router.push({
    path: '/user/products'
  });
};

// 监听分类变化
watch(categoryId, () => {
  currentPage.value = 1; // 重置到第一页
  fetchProducts();
});

// 监听路由参数变化
watch(() => route.query, (newQuery, oldQuery) => {
  // 监听分类变化 - 检查oldQuery是否存在
  if (oldQuery && newQuery.category !== oldQuery.category) {
    if (newQuery.category) {
      categoryId.value = newQuery.category as string;
      // 重置其他筛选条件
      minPrice.value = '';
      maxPrice.value = '';
    } else {
      categoryId.value = '';
      selectedCategory.value = '';
    }
    
    currentPage.value = 1; // 重置页码
  } else if (!oldQuery) {
    // 首次加载时处理
    if (newQuery.category) {
      categoryId.value = newQuery.category as string;
    }
  }
  
  if (newQuery.sort) {
    sortOption.value = newQuery.sort as string;
  }
  
  fetchProducts();
}, { immediate: true, deep: true });

// 是否有筛选条件
const hasFilters = computed(() => {
  return !!selectedCategory.value || !!minPrice.value || !!maxPrice.value || !!route.query.keyword;
});

// 推荐其他分类，最多显示4个随机分类
const suggestedCategories = computed(() => {
  if (!categories.value || categories.value.length <= 1) return [];
  
  // 过滤掉已选择的分类
  const filteredCategories = categories.value.filter(cat => 
    cat.id !== Number(categoryId.value)
  );
  
  // 如果类别数量少于或等于4个，直接返回
  if (filteredCategories.length <= 4) return filteredCategories;
  
  // 随机选择4个分类
  const shuffled = [...filteredCategories].sort(() => 0.5 - Math.random());
  return shuffled.slice(0, 4);
});

onMounted(() => {
  // 获取分类列表
  fetchCategories();
  
  // 从URL获取初始参数
  if (route.query.category) {
    categoryId.value = route.query.category as string;
  }
  
  if (route.query.sort) {
    sortOption.value = route.query.sort as string;
  }
  
  // 获取商品列表
  fetchProducts();
});
</script>

<style scoped>
.product-list-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px 5%;
  width: 100%;
  background-color: #fafafa;
}

/* 分类导航区域 */
.categories-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 30px;
  padding: 20px 25px;
  border-radius: 12px;
  background-color: #fff;
  position: relative;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.categories-nav::before {
  content: '商品分类:';
  color: #555;
  font-weight: 600;
  margin-right: 15px;
  align-self: center;
  font-size: 15px;
}

.category-item {
  padding: 10px 18px;
  border-radius: 25px;
  background-color: #f5f5f5;
  color: #555;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-size: 14px;
  white-space: nowrap;
  border: 1px solid #eeeeee;
}

.category-item:hover {
  background-color: #fff0f4;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(255, 107, 152, 0.15);
  border-color: #ffd0df;
  color: #FF6B98;
}

.category-item.active {
  background: linear-gradient(135deg, #FF6B98, #FF8CAF);
  color: white;
  font-weight: 500;
  box-shadow: 0 5px 12px rgba(255, 107, 152, 0.25);
  border: 1px solid #FF6B98;
}

.filter-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 25px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.price-filter {
  display: flex;
  align-items: center;
}

.price-input {
  width: 110px;
  transition: all 0.3s ease;
}

.price-input :deep(.el-input__inner) {
  border-radius: 20px;
  transition: all 0.3s ease;
}

.price-input :deep(.el-input__inner:focus) {
  border-color: #FF6B98;
  box-shadow: 0 0 0 2px rgba(255, 107, 152, 0.2);
}

.price-separator {
  margin: 0 10px;
  color: #999;
}

.filter-tag {
  margin-top: 12px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #606266;
}

.filter-tag .el-tag {
  margin-left: 8px;
  cursor: pointer;
  border-radius: 4px;
  background-color: #FFF0F4;
  color: #FF6B98;
  border-color: #FFDCE6;
}

.el-radio-group :deep(.el-radio-button__inner) {
  transition: all 0.3s ease;
}

.el-radio-group :deep(.el-radio-button.is-active .el-radio-button__inner) {
  background-color: #FF6B98;
  border-color: #FF6B98;
  box-shadow: 0 0 8px rgba(255, 107, 152, 0.3);
}

.el-button.el-button--primary {
  background-color: #FF6B98;
  border-color: #FF6B98;
  transition: all 0.3s ease;
}

.el-button.el-button--primary:hover {
  background-color: #ff5289;
  border-color: #ff5289;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(255, 107, 152, 0.3);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-bottom: 40px;
}

.empty-container {
  grid-column: 1 / -1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 20px;
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid #f5f5f5;
  position: relative;
  overflow: hidden;
}

.empty-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 180px;
  background: linear-gradient(135deg, #fff8fa, #fff5f8);
  border-radius: 16px 16px 100% 100%;
  z-index: 0;
}

.empty-state-custom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 500px;
}

.empty-state-image {
  width: 260px;
  height: 260px;
  margin-bottom: 30px;
  animation: float 6s ease-in-out infinite;
  position: relative;
}

.empty-state-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 15px rgba(255, 107, 152, 0.1));
}

.empty-state-decoration {
  position: absolute;
  border-radius: 50%;
  opacity: 0.8;
}

.empty-state-decoration.circle-1 {
  width: 25px;
  height: 25px;
  background: linear-gradient(135deg, #FFB6C1, #FF8CAF);
  top: 15%;
  left: 0;
  animation: floatCircle 8s ease-in-out infinite;
}

.empty-state-decoration.circle-2 {
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #FF8CAF, #FF6B98);
  bottom: 15%;
  right: 10%;
  animation: floatCircle 6s ease-in-out infinite 1s;
}

.empty-state-decoration.star-1 {
  width: 20px;
  height: 20px;
  background: #FF6B98;
  top: 10%;
  right: 10%;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: rotateStar 10s linear infinite;
}

.empty-state-decoration.star-2 {
  width: 15px;
  height: 15px;
  background: #FF8CAF;
  bottom: 15%;
  left: 10%;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: rotateStar 12s linear infinite reverse;
}

.empty-state-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
  background: linear-gradient(135deg, #FF6B98, #ff8dad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 10px rgba(255, 107, 152, 0.15);
}

.empty-state-hint {
  font-size: 16px;
  color: #666;
  margin-bottom: 30px;
  line-height: 1.6;
  max-width: 90%;
}

.empty-state-actions {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

.empty-state-actions .el-button {
  min-width: 180px;
  border-radius: 25px;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 12px 25px;
  font-size: 15px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.empty-state-actions .el-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
  transition: all 0.6s ease;
}

.empty-state-actions .el-button:hover::before {
  left: 100%;
}

.empty-state-actions .el-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 14px rgba(255, 107, 152, 0.2);
}

.empty-state-actions .el-button.el-button--primary {
  background: linear-gradient(135deg, #FF6B98, #ff5289);
  border-color: #FF6B98;
}

.empty-state-actions .el-button.el-button--primary:hover {
  background: linear-gradient(135deg, #ff5289, #FF6B98);
  box-shadow: 0 7px 20px rgba(255, 107, 152, 0.3);
}

/* 淡入淡出过渡效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes floatCircle {
  0% {
    transform: translate(0, 0);
  }
  33% {
    transform: translate(10px, -5px);
  }
  66% {
    transform: translate(-5px, 10px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes rotateStar {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.product-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  position: relative;
  border: 1px solid #f1f1f1;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  border-color: #ffd0df;
}

.product-image {
  position: relative;
  height: 280px;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.product-card:hover .product-image img {
  transform: scale(1.07);
}

.product-badges {
  position: absolute;
  top: 15px;
  left: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.badge {
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(2px);
}

.badge.new {
  background-color: #409EFF;
}

.badge.hot {
  background-color: #FF6464;
}

.badge.recommend {
  background-color: #E6A23C;
}

.product-info {
  padding: 25px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
}

.product-name {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 44px;
  line-height: 1.3;
  transition: color 0.3s ease;
}

.product-card:hover .product-name {
  color: #FF6B98;
}

.product-price {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
}

.current-price {
  font-size: 20px;
  font-weight: 700;
  color: #FF5252;
}

.original-price {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  color: #666;
  font-size: 13px;
  margin-bottom: 15px;
  margin-top: auto;
}

.product-actions {
  display: flex;
  justify-content: space-between;
}

.product-actions .el-button {
  transition: all 0.3s ease;
}

.product-actions .el-button:hover {
  transform: translateY(-3px);
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #eee;
}

.pagination-container :deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
  background-color: #FF6B98;
}

.pagination-container :deep(.el-pagination.is-background .el-pager li:not(.disabled):hover) {
  color: #FF6B98;
}

@media (max-width: 1400px) {
  .products-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
  }
  
  .product-image {
    height: 240px;
  }
}

@media (max-width: 1200px) {
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }
  
  .product-image {
    height: 220px;
  }
  
  .categories-nav, .filter-container {
    padding: 20px;
  }
}

@media (max-width: 992px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .product-info {
    padding: 20px;
  }
  
  .product-image {
    height: 220px;
  }
  
  .categories-nav::before {
    display: block;
    width: 100%;
    margin-bottom: 10px;
  }
}

@media (max-width: 768px) {
  .product-list-container {
    padding: 15px;
  }
  
  .filter-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
  }
  
  .category-filter, 
  .price-filter, 
  .sort-options {
    width: 100%;
  }
  
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  
  .product-image {
    height: 180px;
  }
  
  .product-info {
    padding: 15px;
  }
  
  .categories-nav {
    padding: 15px;
  }
  
  /* 空状态移动端优化 */
  .empty-state-image {
    width: 200px;
    height: 200px;
  }
  
  .empty-state-title {
    font-size: 20px;
  }
  
  .empty-state-hint {
    font-size: 14px;
  }
  
  .empty-state-actions {
    flex-direction: column;
    width: 100%;
    gap: 10px;
    align-items: center;
  }
  
  .empty-state-actions .el-button {
    width: 100%;
    max-width: 240px;
  }
  
  .suggestion-category-item {
    padding: 6px 12px;
    font-size: 12px;
  }
}

@media (max-width: 1440px) {
  .product-list-container {
    max-width: 100%;
  }
}

/* 分类推荐 */
.category-suggestions {
  margin-top: 30px;
  width: 100%;
  padding-top: 20px;
  border-top: 1px dashed #f0f0f0;
}

.suggestion-title {
  font-size: 16px;
  color: #666;
  margin-bottom: 15px;
  text-align: center;
}

.suggestion-categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.suggestion-category-item {
  padding: 8px 16px;
  background-color: #fff5f8;
  border: 1px solid #ffd0df;
  border-radius: 20px;
  color: #FF6B98;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.suggestion-category-item:hover {
  background-color: #FF6B98;
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(255, 107, 152, 0.2);
}

.fade-delayed-enter-active,
.fade-delayed-leave-active {
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: 0.3s;
}

.fade-delayed-enter-from,
.fade-delayed-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
</style> 